<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>文件列表</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="../../css/mui.min.css" />
		<link rel="stylesheet" href="../../css/index.css" />
	</head>
     
     <style>
     	
 .mui-bar {
	background-color: #43484e;
}

.mui-bar a{
    line-height: 30px;	
}

.mui-bar .mui-title,
.mui-bar .mui-icon {
	color: #fff;
}

#home_scroll .mui-table-view {
    padding-bottom: 100px;
    margin-top: 50px;    	
}
.mui-content {
	background-color: #fff;
}

.mui-table-view-cell {
	padding: 14px 15px;
}

.list-img {
	width: 33px;
}

.list-title {
	font-size: 16px;
	color: #333;
	margin-top: 8px;
}

.list-detail {
	float: left;
}

.list-time {
	font-size: 12px;
	color: #999;
}

.list-detail-img {
	line-height: 35px
}

.list-detail-font {
	margin-left: 12px;
}

.mui-table-view-cell:after {
	background-color: #e6e6e6;
}

.mui-table-view:before,
.mui-table-view:after {
	background-color: #e6e6e6;
	height: 0px;
}
.place{
	position: absolute;
    z-index:10;
    top: 50px;
    height: 50px;
    line-height: 50px;
    width: 100%;
    background-color: #f5f5f5;
}
.now-place{
	font-size: 14px;
	color: #999;
    margin-left: 15px;	
}
.footer{
	width: 100%;
    height: 97px;
    z-index: 11;
    position: absolute;
    bottom: 0px;
    background-color: #333;
}
.footer-font{
	font-size: 14px;
    color: #fff;
    height: 35px;
    line-height: 35px;
    margin-left: 15px;
}
.footer-btn{
	width: 100px;
	height: 40px;
	border-radius: 2px;
	font-size: 16px;
	color: #fff;
    border: none;	
}
.footer-btn-out{
	text-align: center;
    margin-top: 5px;	
}
.edit{
	background-color: #5b636b;
}
.up{
	background-color: #0487d0;
}
</style>

	<body>

		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">文件列表</h1>
		</header>

		<div class="place">
			<span class="now-place">当前位置：立白集团/实施文档/</span>
		</div>

		<!-- 主页面内容容器 -->
		<div id="home_scroll" class="mui-content mui-scroll-wrapper">

			<div class="mui-scroll" id="list">

				<ul class="mui-table-view table" id="tableList">
					<li class="mui-table-view-cell" v-for="item in list">
						<div class="list-detail list-detail-img">
							<img class="list-img" src="../../icon/gcyp_wjj.png" />
						</div>
						<div class="list-detail list-detail-font">
							<p class="list-title">{{item.title}}</p>
						</div>
					</li>

				</ul>

			</div>
		</div>
		
		<div class="footer">
			
			<div class="footer-font">
				上传路径：立白集团/实施文档/
			</div>
			<div class="footer-btn-out">
                <button class="footer-btn edit">修改路径</button>
                &emsp;&nbsp;
                <button class="footer-btn up">上传</button> 		
			</div>
		</div>

		<script src="../../js/mui.min.js"></script>
		<script type="text/javascript" src="../../js/vue2.5.js"></script>
		<script type="text/javascript" src="../../js/jquery-3.2.1.min.js"></script>
		<script type="text/javascript">
			mui.init()

			var list = [{
					title: '华润施工模型文档'
				},
				{
					title: 'BIM相关'
				}, {
					title: '默认群组'
				}, {
					title: '全景文档'
				},
				{
					title: '功能演示视频'
				}, {
					title: '工程准备阶段文件（A类）'
				}, {
					title: '施工文件（C类）'
				},
				{
					title: '111'
				}, {
					title: '222'
				}, {
					title: '333'
				}
			];

			new Vue({
				el: '#list',
				data: {
					list: list
				}
			});

			mui('#home_scroll').scroll();
			//实现ios平台原生侧滑关闭页面；
			if(mui.os.plus && mui.os.ios) {
				mui.plusReady(function() { //5+ iOS暂时无法屏蔽popGesture时传递touch事件，故该demo直接屏蔽popGesture功能
					plus.webview.currentWebview().setStyle({
						'popGesture': 'none'
					});
				});
			}
		</script>
	</body>

</html>